import { t } from 'i18next'
import { Trigger } from '@kedacom/react-next'
import { StyledColorPicker, StyledColorPanel } from './style'

let colorArr = [
	'#000000',
	'#333333',
	'#595959',
	'#808080',
	'#B0B0B0',
	'#D9D9D9',
	'#E6E6E6',
	'#FFFFFF',
	'#FF0000',
	'#FF9900',
	'#FFFF00',
	'#00FF00',
	'#00FFFF',
	'#0000FF',
	'#9900FF',
	'#FF00FF',
	'#F4CCCC',
	'#FCE5CD',
	'#FFF2CC',
	'#D9EAD3',
	'#D0E0E3',
	'#CEE2F3',
	'#D9D2E9',
	'#EAD1DC',
	'#EA9999',
	'#F9CB9C',
	'#FFE599',
	'#B6D7A8',
	'#A2C4C9',
	'#9FC5E8',
	'#B4A7D6',
	'#D5A6BD',
	'#E06666',
	'#F6B26B',
	'#FFD966',
	'#93C47D',
	'#76A5AF',
	'#6FA8DC',
	'#8E7CC3',
	'#C27BA0',
	'#CC0000',
	'#E69138',
	'#F1C232',
	'#6AA84F',
	'#45818E',
	'#3D85C6',
	'#674EA7',
	'#A64D79',
	'#990000',
	'#B45F06',
	'#BF9000',
	'#38761D',
	'#134F5C',
	'#0B5394',
	'#351C75',
	'#741B47',
	'#660000',
	'#783F04',
	'#7F6000',
	'#274E13',
	'#0C343D',
	'#073763',
	'#20124D',
	'#4C1130',
]

export interface ColorPickerProps {
	disabled?: boolean
	value?: string
	/** 容器 */
	container?: HTMLDivElement | null
	onChange?: (color: string) => void
}
export default function ColorPicker(props: ColorPickerProps) {
	const { disabled, value = '#FFFFFF', container, onChange } = props
	const handleSelect = (color: string) => {
		onChange?.(color)
	}
	const colorPanel = (
		<StyledColorPanel>
			<div className="panel-title">{t('颜色选择')}</div>
			<ul>
				{colorArr.map((item, index) => (
					<li
						key={index}
						style={{ background: item }}
						className={`color-box ${item === value ? 'selected' : ''}`}
						onClick={() => handleSelect(item)}
					></li>
				))}
			</ul>
		</StyledColorPanel>
	)
	return (
		<StyledColorPicker>
			<Trigger
				container={container !== undefined ? () => container : container}
				popup={colorPanel}
				popupPlacement="bottomStart"
				popupAlign={{ offset: [0, 3] }}
				disabled={disabled}
				preventOverflow
			>
				<span className="picker-icon" />
			</Trigger>
		</StyledColorPicker>
	)
}
